<!--
 * @Author: yanyufengqing 1624478125@qq.com
 * @Date: 2025-10-03 16:26:08
 * @LastEditors: yanyufengqing 1624478125@qq.com
 * @LastEditTime: 2025-10-03 16:28:15
 * @FilePath: \manage-system\src\components\CustomButton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-button 
    :type="type" 
    :size="size" 
    :loading="loading"
    :disabled="disabled"
    @click="handleClick"
    class="custom-button"
  >
    <el-icon v-if="icon && !loading" class="button-icon">
      <component :is="icon" />
    </el-icon>
    <slot />
  </el-button>
</template>

<script setup lang="ts">
import type { ButtonType } from 'element-plus'

type ButtonSize = 'large' | 'default' | 'small'

interface Props {
  type?: ButtonType
  size?: ButtonSize
  loading?: boolean
  disabled?: boolean
  icon?: any
}

interface Emits {
  click: [event: MouseEvent]
}

withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'default',
  loading: false,
  disabled: false
})

const emit = defineEmits<Emits>()

const handleClick = (event: MouseEvent) => {
  emit('click', event)
}
</script>

<style scoped>
.custom-button {
  margin: 5px;
}

.button-icon {
  margin-right: 5px;
}
</style>